<template>
  <el-autocomplete
      style="width: 100%"
      v-model.lazy="val"
      placeholder="中文"
      :fetch-suggestions="querySearchAsync"
      @select="select"
      @clear="clear"
      @blur="translate"
      clearable/>
</template>

<script>
  import {listBrandApi} from '@/api/order'

  export default {
    name: "SearchSelectItem",
    props: {
      that: {
        type: Object
      },
      value: {
        type: String
      }
    },
    data() {
      return {
        val: ''
      }
    },
    watch: {
      value(val, old) {
        if (val && !old) { // 第一次输入执行
          this.val = val;
        }
        if (!val) { // 清空执行
          this.val = ''
        }
      }
    },
    methods: {
      // 选择词条
      select(val) {
        let _this = this.that;
        this.$emit('input', val.name);
        _this.brandOption = val.brandList;
      },
      // 清除词条
      clear() {
        let _this = this.that;
        this.$emit('input', '');
        _this.form.laosArticleName = '';
        _this.form.enArticleName = '';
        _this.brand = '无品牌';
        _this.brandOption = [];
      },
      // 搜索词条
      querySearchAsync(query, cb) {
        this.$emit('input', query);
        if (query) {
          listBrandApi({name: query})
            .then(result => {
              let response = result.resultParam.brandDtoList
              response.forEach(item => {
                item.value = item.name
              })
              cb(response)
            })
        } else {
          cb([])
        }
      },
      // 初始化词条
      setItemMethod(query) {
        let _this = this.that;
        listBrandApi({name: query}).then(result => {
          let response = result.resultParam.brandDtoList
          if (response.length > 0) {
            _this.brandOption = response[0].brandList;
          } else {
            _this.brandOption = [];
          }
        })
      },
      // 翻译
      translate() {
        let _this = this.that;
        _this.getSpecifications()
        _this.translateZhToLaos(_this.form.articleName, 'laosArticleName') // 老挝文商品名称
        _this.translateZhToEn(_this.form.articleName, 'enArticleName') // 英文商品名称
      }
    }
  }
</script>
